/* eslint-disable react/prop-types */

import { usePathname } from '@/router/hooks';

import './layer.css';

export default function CreatePage(props) {
  const { setCreateVisible } = props;
  const pathname = usePathname().replace('/', '');

  const items = [
    { key: 'editor', label: '去创作' },
    { key: 'product', label: '产品' },
    { key: 'gift', label: '礼品' },
    { key: 'enterprise', label: '企业' },
    { key: 'group', label: '团体' },
  ];

  const handleTab = (url) => {
    setCreateVisible(false);
    window.location.href = `/#/${url}`;
  };

  return (
    <div
      className="create-layer-page"
      onMouseEnter={() => setCreateVisible(true)}
      onMouseLeave={() => setCreateVisible(false)}
    >
      <div className="layer-content flex w-[1424px] items-center gap-[80px]">
        {items.map((item) => (
          <div
            key={item.key}
            onClick={() => handleTab(item.key)}
            className={[
              'create-tab',
              'cursor-pointer',
              'text-[16px]',
              'text-[#363A44]',
              pathname.indexOf(item.key) !== -1 ? 'tab-active' : '',
            ].join(' ')}
          >
            {item.label}
          </div>
        ))}
      </div>
    </div>
  );
}
